<template>


  <div class="categoryList">
    <div id="">
      <van-nav-bar
       title="标题"
       left-text="返回"
       ight-text="按钮"
       left-arrow
       @click-left="onClickLeft"
      />
    </div>
    <van-tabs v-model="tagActive">
      <van-tab style="text-align: center;padding:20px 0 10px 0;" v-for="(item,index) in thelabel" :key="index"
        :title="item.name">
        <h2 style="padding-bottom:10px">{{item.name}}</h2>
        <p>{{item.front_name}}</p>
      </van-tab>
    </van-tabs>
    <van-grid :column-num="2" :border="true">
      <van-grid-item style="text-align: center;" v-for="(item,index) in ListData"

       @click="gotolink(item.id)"
       :key="index" icon= ""
        :text="item.name" >
        <van-image width="100" height="100" :src="item.list_pic_url" />
        <p class="van-ellipsis"> {{item.name}}</p>
        <p class="price">{{item.retail_price |filtermoneny}}</p>
      </van-grid-item>

    </van-grid>
  </div>
</template>

<script>
  import {
    GetCateData,
    GetSearchData
  } from "@/request/api";
  export default {
    data() {
      return {
        tagActive: 0,
        thelabel: [],
        ListData: []
      };
    },
    created() {
      this.CatePost();
      this.Getlist(1008002, 1, 20)
    },
    methods: {
      CatePost() {
        GetCateData({
          id: this.$route.query.id,
        }).then(res => {
          if (res.errno == 0) {
            this.thelabel = res.data.brotherCategory;
            console.log(this.thelabel)
          }
        });
      },
      Getlist(id, page, size) {
        console.log(id)
        GetSearchData({
          categoryId: id,
          page: page,
          size: size
        }).then(res => {
          if (res.errno == 0) {
            console.log(res)
            this.ListData = res.data.data
          }
        })
      },
      onClickLeft(){
        this.$router.go(-1)
      },
      gotolink(id){
        this.$router.push({path:'/priductdet',query:{id}});
      }
    },
    watch: {
      tagActive: function(index) {
        console.log(index);
        let id = this.thelabel[index].id;
        let page = 1;
        let size = 20;
        this.Getlist(id, page, size)
      }
    }
  }
</script>

<style scoped>
  .van-ellipsis {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    padding: 0 10px;
  }

  .price {
    color: red;
    font-size: 13px;
  }

  .van-grid-item {
    overflow: hidden;
    box-sizing: border-box;

  }
</style>
